<template>
  <div class="container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="预约用户">
        <el-input size="small" v-model.trim="searchParams.appointmentName"></el-input>
      </el-form-item>
      <el-form-item label="预约手机号">
        <el-input size="small" v-model.trim="searchParams.appointmentCellphone"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input size="small" v-model.trim="searchParams.productName"></el-input>
      </el-form-item>
      <el-form-item label="商品编号">
        <el-input size="small" v-model.trim="searchParams.productNo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchTable">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="small" @click="refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-origin">
      <my-table ref="myTableRef" stripe border highlight-current-row align="center" size="medium" :columns="columns"
        :loader="loader" :page-size="pageSize" :page="page"
        :pagination="{layout:'->, total, sizes, prev, pager, next, jumper',pageSizes: [10, 30, 50, 100]}">
        <template v-slot:flowState="{row}">
          <el-tag size="mini" effect="dark" type="success" v-if="row.flowState==0">待分配</el-tag>
          <el-tag size="mini" effect="dark" type="danger" v-else>已分配</el-tag>
        </template>
        <template v-slot:operate="{row}">
          <el-button plain size="mini" @click="distribution(row)" type="warning" v-if="row.flowState==0">分配
          </el-button>
          <el-button plain size="mini" @click="showInfo(row)" v-if="row.flowState==3">查看反馈
          </el-button>
        </template>
      </my-table>
    </div>
    <!-- <appointmentInfo ref="appointmentInfoRef"></appointmentInfo> -->
    <locationModal ref="locationModalRef"></locationModal>

    <!-- 客户意向和反馈内容 -->
    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="700px">
      <el-form :model="feedback" label-width="80px">
        <el-form-item label="客户意向">
          <el-input disabled value="无意向" v-if="feedback.feedbackState === 0"></el-input>
          <el-input disabled value="一般" v-else-if="feedback.feedbackState === 1"></el-input>
          <el-input disabled value="强烈" v-else-if="feedback.feedbackState === 2"></el-input>
        </el-form-item>
        <el-form-item label="反馈内容">
          <el-input type="textarea" :rows="3" disabled v-model="feedback.feedbackContent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import appointmentInfo from './core/appointmentInfo.vue'
  import locationModal from './core/locationModal.vue'
  import {
    productAppointmentList,
  } from '@/api/mall.product.js'
  export default {
    components: {
      // appointmentInfo,
      locationModal
    },
    data() {
      return {
        feedback: {
          feedbackContent: undefined,
          feedbackState: undefined
        },
        page: 1,
        pageSize: 10,
        columns: [{
            label: '序号',
            type: 'index',
            index: (index) => {
              return ((this.page - 1) * this.pageSize + index + 1)
            },
            align: 'center',
            fixed: 'left',
            width: 50
          },
          {
            label: '预约用户',
            prop: 'appointmentName',
            align: 'left',
            width: 100
          },
          {
            label: '预约手机号',
            prop: 'appointmentCellphone',
            align: 'left',
            width: 120
          },
          {
            label: '商品名称',
            prop: 'product.productName',
            align: 'left',
            width: 200
          },
          {
            label: '商品编号',
            prop: 'product.productNo',
            align: 'left',
            width: 150
          },
          {
            label: '操作时间',
            prop: 'handleTime',
            align: 'left',
            width: 150
          },
          {
            label: '分配门店',
            prop: 'advertising.advertisingName',
            align: 'left'
          },
          {
            label: '接收人',
            prop: 'receiverUser.nickname',
            align: 'left',
            width: 100
          },
          {
            label: '接收时间',
            prop: 'receiverTime',
            align: 'left',
            width: 150
          },
          {
            label: '反馈时间',
            prop: 'feedbackTime',
            align: 'left',
            width: 150
          },
          {
            label: '流程状态',
            prop: 'flowState',
            align: 'left',
            width: 80
          },
          {
            label: '操作',
            prop: 'operate',
            align: 'left',
            fixed: 'right',
            width: 120
          }
        ],
        searchParams: {
          productName:undefined,
          productNo:undefined,
          appointmentName:undefined,
          appointmentCellphone:undefined,
        },
        dialogFormVisible: false
      }
    },
    methods: {
      //加载数据
      async loader(page, pageSize) {
        var params = Object.assign(this.searchParams, {
          page,
          pageSize
        });
        var res = await productAppointmentList(params);
        this.page = page;
        this.pageSize = pageSize;
        return res.data;
      },

      refresh(){
        this.searchParams={
          productName:undefined,
          productNo:undefined,
          appointmentName:undefined,
          appointmentCellphone:undefined,
        },
        this.searchTable();
      },


      searchTable() {
        this.$refs.myTableRef.refresh(this.page);
      },
      distribution(row) {
        this.$refs.locationModalRef.open(row.productAppointmentId);
      },

      // 详情
      showInfo(row) {
        // this.$refs.appointmentInfoRef.open(row.productAppointmentId);
        this.feedback.feedbackContent = row.feedbackContent
        this.feedback.feedbackState = row.feedbackState
        this.dialogFormVisible = true
      }

    }
  }
</script>

<style scoped lang="scss">
  .container {
    padding: 15px;

    .el-form .el-form-item {
      margin-bottom: 20px;
    }
  }
</style>
